<template>
    <Homeheader></Homeheader>
    <div id="app"  :class="{'dg':backgrand_color=='dg','ss':backgrand_color=='ss'}">
        <!-- tab切换 -->
        <div id="tab">
            <a-button shape="circle" size="big" :icon="h(ArrowLeftOutlined)" @click="router.push('/more')"/>
            <span style="display: inline-block;font-size: 2.5vw;font-weight: bold;margin-left: 2vw;" v-if="infoTag=='连接设备'">{{ $t('messages.connect') }}</span>
            <span style="display: inline-block;font-size: 2.5vw;font-weight: bold;margin-left: 2vw;" v-if="infoTag=='通知'">{{ $t('messages.notification') }}</span>
            <span style="display: inline-block;font-size: 2.5vw;font-weight: bold;margin-left: 2vw;" v-if="infoTag=='外观'">{{ $t('messages.appearance') }}</span>
            <span style="display: inline-block;font-size: 2.5vw;font-weight: bold;margin-left: 2vw;" v-if="infoTag=='语言'">{{ $t('messages.lang') }}</span>
        </div>
        <div id="content">
            <!-- 左侧 -->
            <div id="tagBox">
                <div id="tagBtn" :class="{'tagBtn':infoTag=='连接设备'}" @click="infoTag='连接设备'">
                    <div class="iconfont icon-WIFI"></div>
                    <div style="margin-left: 10px;box-sizing: border-box;">{{ $t("messages.connect") }}</div>
                </div>
                <div id="tagBtn" :class="{'tagBtn':infoTag=='通知'}" @click="infoTag='通知'">
                    <div class="iconfont icon-icon-test1"></div>
                    <div style="margin-left: 10px;box-sizing: border-box;">{{ $t("messages.notification") }}</div>
                </div>
                <div id="tagBtn" :class="{'tagBtn':infoTag=='外观'}" @click="infoTag='外观'">
                    <div class="iconfont icon-icon-test"></div>
                    <div style="margin-left: 10px;box-sizing: border-box;">{{ $t("messages.appearance") }}</div>
                </div>
                <div id="tagBtn" :class="{'tagBtn':infoTag=='语言'}" @click="infoTag='语言'">
                    <div class="iconfont icon-icon-test2"></div>
                    <div style="margin-left: 10px;box-sizing: border-box;">{{ $t("messages.lang") }}</div>
                </div>
            </div>
            <!-- 右侧（根据infoTag进行判断） -->
            <div id="tabCon">
                <!-- 当 infoTag=连接设备 时展示店铺信息 -->
                <div v-show="infoTag=='连接设备'" id="lianjieshebei">
                    <div id="bigBox">
                        <div id="storeInfo_title">{{ $t('messages.stay_tuned') }}</div>
                        
                    </div>
                    
                </div>
                <!-- 当 infoTag=通知 时展示通知 -->
                <div v-show="infoTag=='通知'" id="tongzhi">
                    <div id='tongzhi_box'>
                        <div style='font-size: 24px;font-weight:bold;' >{{ $t('messages.notification_set') }}</div>
                        <div id='con_box'>
                            <div id='cont_left'>
                                <div id='top'>{{ $t('messages.out_of_stock') }}</div>
                                <div id='bottom'>{{ $t('messages.out_of_stock_text') }}</div>
                            </div>
                            <div id='cont_right'>
                                <a-switch @click="checkFlag('spqhFlag',spqhFlag)" v-model:checked="spqhFlag" />
                            </div>
                        </div>
                        <div id='con_box'>
                            <div id='cont_left'>
                                <div id='top'>{{ $t("messages.order_status") }}</div>
                                <div id='bottom'>{{ $t("messages.order_status_text") }}</div>
                            </div>
                            <div id='cont_right'>
                                <a-switch @click="checkFlag('ddztFlag',ddztFlag)" v-model:checked="ddztFlag" />
                            </div>
                        </div>
                        <div id='con_box'>
                            <div id='cont_left'>
                                <div id='top'>{{$t('messages.new_order')}}</div>
                                <div id='bottom'>{{$t('messages.new_order_text')}}</div>
                            </div>
                            <div id='cont_right'>
                                <a-switch @click="checkFlag('xdgFlag',xdgFlag)" v-model:checked="xdgFlag" />
                            </div>
                        </div>
                        <div id='con_box'>
                            <div id='cont_left'>
                                <div id='top'>{{$t('messages.payment')}}</div>
                                <div id='bottom'>{{$t('messages.payment_text')}}</div>
                            </div>
                            <div id='cont_right'>
                                <a-switch @click="checkFlag('zfFlag',zfFlag)" v-model:checked="zfFlag" />
                            </div>
                        </div>
                        <div id='con_box'>
                            <div id='cont_left'>
                                <div id='top'>{{$t('messages.product_promotion')}}</div>
                                <div id='bottom'>{{$t('messages.product_promotion_text')}}</div>
                            </div>
                            <div id='cont_right'>
                                <a-switch @click="checkFlag('cpcxFlag',cpcxFlag)" v-model:checked="cpcxFlag" />
                            </div>
                        </div>
                        <div id='con_box'>
                            <div id='cont_left'>
                                <div id='top'>{{ $t('messages.email_notification') }}</div>
                                <div id='bottom'>{{ $t('messages.email_notification_text') }}</div>
                            </div>
                            <div id='cont_right'>
                                <a-switch @click="checkFlag('dzyjtzFlag',dzyjtzFlag)" v-model:checked="dzyjtzFlag" />
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 当 infoTag=外观 时展示外观 -->
                <div v-show="infoTag=='外观'" id="waiguan">
                    <div id="tabBox">
                        <div style='font-size:1.5rem;font-weight:bold;margin-top:1rem;margin-left:2rem;box-sizing:border-box;'>{{ $t('messages.appearance_set') }}</div>
                        <div id='wg_conBox'>
                            <div id='con_box'>
                                <div id='con_title'>{{ $t('messages.light_mode') }}</div>
                                <div id="con_select">
                                    <input id='check_radio' :checked="backgrand_color=='dg'"  @click="checkColor('dg')" name="moshi" type="radio" style="width:25px;height:25px;"/>
                                </div>
                            </div>
                            <div id='con_box'>
                                <div id='con_title'>{{ $t('messages.dark_mode') }}</div>
                                <div id="con_select">
                                    <input id='check_radio' :checked="backgrand_color=='ss'" @click="checkColor('ss')" name="moshi" type="radio" style="width:25px;height:25px;"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 当 infoTag=语言 时展示通知 -->
                <div v-show="infoTag=='语言'" id="yuyan">
                    <div id="tabBox">
                        <div style='font-size:1.5rem;font-weight:bold;margin-top:1rem;margin-left:2rem;box-sizing:border-box;'>{{ $t('messages.lang_set') }}</div>
                        <div id='yy_conBox'>
                            <div id='con_box'>
                                <div id='con_title'>{{ $t("messages.zh") }}</div>
                                <div id="con_select">
                                    <input :checked="thisLang=='zh'" id='check_radio' @click="checkLang('zh')" name="moshi" type="radio" style="width:25px;height:25px;"/>
                                </div>
                            </div>
                            <div id='con_box'>
                                <div id='con_title'>{{ $t("messages.en") }}</div>
                                <div id="con_select">
                                    <input :checked="thisLang=='en'" id='check_radio' @click="checkLang('en')" name="moshi" type="radio" style="width:25px;height:25px;"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import Homeheader from '@/views/pages/Homeheader.vue';
import { useI18n } from 'vue-i18n';
import { ref, h } from 'vue'
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import {useRoute,useRouter} from 'vue-router'
const { locale } = useI18n();
let thisLang = ref(sessionStorage.getItem('lang'))

const spqhFlag = ref(localStorage.getItem('spqhFlag')=="false"?false:true)
const ddztFlag = ref(localStorage.getItem('ddztFlag')=="false"?false:true)
const xdgFlag = ref(localStorage.getItem('xdgFlag')=="false"?false:true)
const zfFlag = ref(localStorage.getItem('zfFlag')=="false"?false:true)
const cpcxFlag = ref(localStorage.getItem('cpcxFlag')=="false"?false:true)
const dzyjtzFlag = ref(localStorage.getItem('dzyjtzFlag')=="false"?false:true)
const backgrand_color = ref(sessionStorage.getItem('backgrand_color')?sessionStorage.getItem('backgrand_color'):'dg')
let checkColor = (i)=>{
    sessionStorage.setItem('backgrand_color',i)
    backgrand_color.value=i
}
let checkLang = (i)=>{

    locale.value = i
    sessionStorage.setItem('lang',i)
    console.log(locale.value)
    // 刷新页面
    window.location.reload()

}
let route = useRoute()
let router = useRouter()
let checkFlag = (i,j)=>{

    localStorage.setItem(i,j)
}
let infoTag = ref(route.query.type?route.query.type:"店铺信息")
const tabledata = ref([
  { name: "张三", dianzhang: "黄金会员", jingli: "黄金会员", phone: 12345678901 },
  { name: "李四", dianzhang: "黄金会员", jingli: "黄金会员", phone: 12345678901 },
  { name: "王五", dianzhang: "黄金会员", jingli: "黄金会员", phone: 12345678901 },
  { name: "赵六", dianzhang: "黄金会员", jingli: "黄金会员", phone: 12345678901 }
]);
</script>


<style scoped>
.dg{
    background:#F5F5F5;
}
.ss{
    background:black;
}
#app {
    width: 100vw;
    height: 100vh;
    padding-top: 13vh;
    padding-bottom: 2vh;
    padding-left: 2vh;
    padding-right: 2vh;
    overflow: auto; /* 当内容超出容器时显示滚动条 */

    box-sizing: border-box;

    #content {
        width: 100%;

        margin-top: 2vh;
        display: flex;

        #tagBox{
            width: 25%;
            border-radius: 20px;
            background: white;
            padding-top: 20px;
            max-height: 28vh;
            box-sizing: border-box;
            #tagBtn{
                width: 80%;
                height: 50px;
                margin: 0 auto;
                line-height: 50px;
                margin-bottom: 15px;
                display: flex;
                box-sizing: border-box;
                border-radius: 15px;


            }
            .tagBtn{
                background: #F0F8FF;
            }
        }

        #tabCon{
            width: 70%;
            margin-left: 2vw;
            /* padding: %; */
            box-sizing: border-box;
            /* background: red; */
            /* 当 infoTag=连接设备 时展示连接设备 */
            #lianjieshebei{
                width: 100%;
                height:180px;
                #bigBox{
                    width: 100%;
                    border-radius: 10px;
                    background: white;
                    margin: 0px auto;
                    height: 300px;
                    padding: 2%;
                    box-sizing: border-box;
                    #storeInfo_title{
                        font-size: 50px;
                        text-align: center;
                        line-height:280px;
                        font-weight: bold;
                    }
                    
                }
                
            }
            /* <!-- 当 infoTag=通知 时展示通知 --> */
            #tongzhi{
                #tongzhi_box{
                    width:100%;
                    padding:4%;
                    box-sizing: border-box;
                    background:white;
                    border-radius: 10px;
                    #con_box{
                        display:flex;
                        width:100%;
                        height:100px;
                        #cont_left{
                            width:70%;
                            padding-top:2%;
                            #top{
                                font-size:20px;
                                font-weight:bold;
                            }
                            #bottom{
                                font-size:20px;
                            }
                        }
                        #cont_right{
                            width:30%;
                            text-align: right;
                            line-height: 100px;
                        }
                    }
                }
            }
            /* <!-- 当 infoTag=外观 时展示外观 --> */
            #waiguan{
                #tabBox{
                    width: 100%;
                    border-radius: 10px;
                    background: white;
                    margin: 0 auto;
                    padding:10px;
                    box-sizing: border-box;
                    #wg_conBox{
                        padding-left: 2%;
                        box-sizing: border-box;
                        #con_box{
                            display: flex;
                            justify-content:space-around;
                            margin:2%;
                            margin-top: 2rem;
                            box-sizing: border-box;
                            #con_title{
                                font-size: 1.3rem;
                                font-weight: bold;
                                width:80%;
                                text-align:left;
                            }
                            #con_select{
                                width: 20%;
                                text-align: right;
                            }
                        }
                    }
                }
            }
            /* <!-- 当 infoTag=语言 时展示语言 --> */
            #yuyan{
                #tabBox{
                    width: 100%;
                    border-radius: 10px;
                    background: white;
                    margin: 0 auto;
                    padding:10px;
                    box-sizing: border-box;
                    #yy_conBox{
                        padding-left: 2%;
                        box-sizing: border-box;
                        #con_box{
                            display: flex;
                            justify-content:space-around;
                            margin:2%;
                            margin-top: 2rem;
                            box-sizing: border-box;
                            #con_title{
                                font-size: 1.3rem;
                                /* font-weight: bold; */
                                width:80%;
                                text-align:left;
                            }
                            #con_select{
                                width: 20%;
                                text-align: right;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>